<template>
  <view class="container">
    <!-- 搜索栏 -->

    <!-- 服务分类 -->
    <view class="category-section">
      <view 
        v-for="(category, index) in categories" 
        :key="index"
        class="category-item"
        @click="switchCategory(index)"
        :class="{ active: activeCategory === index }"
      >
        <text class="category-name">{{ category.name }}</text>
        <view class="category-line" :class="{ active: activeCategory === index }"></view>
      </view>
    </view>

    <!-- 内容区域 -->
    <swiper 
      class="content-swiper" 
      :current="activeCategory"
      @change="onSwiperChange"
      :style="{ height: 'calc(100vh - 190rpx)' }"
    >
      <!-- 陪诊服务 -->
      <swiper-item>
        <scroll-view 
          scroll-y 
          class="scroll-container"
        >
          <AccopanyService />
        </scroll-view>
      </swiper-item>
      
      <!-- 就医助手 -->
      <swiper-item>
        <scroll-view 
          scroll-y 
          class="scroll-container"
        >
          <MedicalAIChat />
        </scroll-view>
      </swiper-item>
      
      <!-- 就医保障 -->
      <swiper-item>
        <scroll-view 
          scroll-y 
          class="scroll-container"
        >
          <ProtectionService />
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import AccopanyService from './AccompanyService.vue';
import MedicalAIChat from './MedicalAIChat.vue';
import ProtectionService from './homestay.vue';

export default {
  components: {
    AccopanyService,
    MedicalAIChat,
    ProtectionService
  },
  data() {
    return {
		//activeCategory：控制当前显示哪个分类（索引值）
      activeCategory: 0,
      categories: [
        { name: '陪诊服务' },
        { name: '就医助手' },
        { name: '住房服务' }
      ]
    };
  },
  methods: {
	  // 点击分类标签时切换分类
    switchCategory(index) {
      this.activeCategory = index;
    },
	// swiper滑动切换时同步更新激活状态
    onSwiperChange(e) {
      this.activeCategory = e.detail.current;
    }
  }
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 搜索栏样式 */
.search-section {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
}

.search-input {
  flex: 1;
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 36rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
}

.search-btn {
  margin-left: 20rpx;
  width: 120rpx;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
  background: #4B7BFF;
  color: #fff;
  border-radius: 36rpx;
  font-size: 28rpx;
}

/* 分类标签样式 */
.category-section {
  display: flex;
  background-color: #fff;
  padding: 0 20rpx;
  border-bottom: 1rpx solid #eee;
}

.category-item {
  position: relative;
  padding: 24rpx 30rpx;
  margin-right: 30rpx;
}

.category-name {
  font-size: 30rpx;
  color: #333;
  font-weight: normal;
}

.category-item.active .category-name {
  color: #4B7BFF;
  font-weight: bold;
}

.category-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 4rpx;
  background-color: #4B7BFF;
  transition: width 0.3s;
}

.category-line.active {
  width: 40rpx;
}

/* 内容区域样式 */
.content-swiper {
  flex: 1;
}

.scroll-container {
  height: 100%;
}
</style>